<template>
  <div class="home">

<div class="tab-nav">
  <van-tabs v-model="active" :animated="true" color="#ff5f33" >
    <van-tab title="趣味生活" name="a" to="/"   ></van-tab>
    <van-tab title="数码极客" name="b" to="/digit" ></van-tab>
    <van-tab title="舌尖美味" name="c" to="/delicious"></van-tab>
    <van-tab title="用户"    name="d" to="/user">用户</van-tab>
</van-tabs>
</div>

<router-view /> 

     <div class="left-list" v-for="(i,index) in homeDate" :key="index" @click="next(index)">
            <div class="list-img"><img :src="i.titlepic" alt=""></div>

            <div class="list-text">
                <h2>{{i.title}}</h2>
                <p class="text-dec">{{i.smalltext}}</p>
                <p class="text-time">
                  <span> <i class="time-log"><img src="../assets/img/time.svg" alt=""></i>{{i.newstime}}</span>
                  <span> <i class="see-log"><img src="../assets/img/see.svg" alt=""></i>{{i.onclick}}</span>
                </p>
            </div>
     </div>

  </div>
</template>

<script>



export default {
  
   data(){
     return {
        homeDate:[],
        active: 'c'
     }
   },

    created() {
      this.getDate()
    },
   
    methods: {
     async  getDate() {
         
          // 本地请求数据用绝对路径,json文件要放在public文件夹中
         let data = await this.$axios.get('/data/delicious.json')
          this.homeDate = data.data
       
          
         },

         next(index) {
          
          this.$router.push(`/deliciousdec/${index}`)
         },
    },
  components: {
    
  }
}
</script>






<style lang="scss" scoped>
  .home {
    position: relative;
     width: 100vw;
     margin-top: 10px;
     z-index: 1;
     // padding: 10px;


     .tab-nav {
       position: sticky; 
       top:0;
       left: 0;
       right: 0;
     
     }

     .left-list {
       display: flex;
        margin-bottom: 10px;
        background: white;
        border: 5px solid #eee;

        .list-img {
             flex: 0 0 30vw;
             width: 30vw;
             height: 75px;
             margin-right: 10px;

           & img {
              width: 100%;
              height: 100%;
             //  display: block;
           }

        }

        .list-text {
          flex: 0 0 60vw;
          width: 60vw;
          padding: 5px;


          .text-dec {
             width: 100%;
             height: 30px;
             line-height: 30px;
             white-space:nowrap;
             overflow:hidden;
             text-overflow:ellipsis;
             font-size: 13px;
             color: #aab2bd;
             


          }

          .text-time {
            font-size: 12px;
             color: #aab2bd;

               span {
                 margin-right: 5px;
               }
             .time-log,
             .see-log {
                display: inline-flex;
                width: 15px;
                height: 15px;
                margin-right: 5px;

                 & img {
                   width: 100%;
                   height: 100%;
                 }
             }

          }
        }
     }
  }
</style>

